<template>
  <div class="container">
    <img src="https://img.ameimeika.com/h5_images/my_partner/loginImg.png" alt class="mainImg" />
    <div class="formdata">
      <input type="number" placeholder="请填写手机号码" v-model="tel" class="inp" maxlength="11"/>
      <input type="number" placeholder="请填写短信验证码" v-model="code" class="inp" />
      <button class="codebtn" @click.stop="getCode" >{{codeText}}</button>
    </div>
    <div class="btnbox">
      <div class="btn">登录</div>
    </div>
    <img
      src="https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/my_partner/login.png"
      alt
      class="bottomImg"
    />
  </div>
</template>

<script>
import common from "@/assets/js/common.js"

export default {
  components: {
    // card
  },

  data() {
    return {
      tel: "",
      code: "",
      codeText: "获取验证码",
      isDisabled: false,
      timing:'',
      interval:''
    };
  },
  onLoad (options) {
    this.tel = '';
    this.code = '';
    this.timing = ''
    this.text = '获取验证码';
    this.isDisabled = false;
    clearInterval(this.interval);
  },
  created() {},
  methods: {
    getCode() {
      // console.log(11)
      if (!this.tel) {
        common.mmk_Loading(2, "请输入手机号");
        return false;
      }
      var that = this;
      that.timing = 30;
      that.interval = setInterval(function() {
        if (--that.timing > 0) {
          that.text = that.timing + "s后重发";
          that.isDisabled = true;
        } else {
          that.text = "重新发送";
          that.isDisabled = false;
          clearInterval(that.interval);
        }
      }, 1000);
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_5/card_ticket/sms_code",
        {
          phone: this.tel
        },
        result => {
          common.mmk_Loading(1);
          let res = result.data;
          if (res.status_code == 0) {
            common.mmk_Loading(2, "短信已发送至你的手机,注意查收");
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    }
  }
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  // height: 100%;
  background: #4866ff;
  text-align: center;
  .mainImg {
    width: 170px;
    height: 184px;
    margin: 35px auto;
  }
  .formdata {
    width: 100%;
    position: relative;
    .inp {
      width: 86.6%;
      height: 40px;
      text-align: left;
      margin: 0 auto;
      border-bottom: 1px solid #ffffff;
      color: #fff;
      ::placeholder {
        font-size: 16px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.39);
      }
    }
    .codebtn {
      width: 72px;
      height: 23px;
      background: rgba(255, 255, 255, 0.14);
      border-radius: 12px;
      color: rgba(255, 255, 255, 0.3);
      line-height: 23px;
      text-align: center;
      position: absolute;
      right: 7%;
      bottom: 5px;
      font-size: 12px;
      padding: 0;
      z-index: 999;
    }
  }
  .btnbox {
    margin-top: 42px;
    width: 100%;
    text-align: center;
    .btn {
      width: 68.8%;
      height: 40px;
      background: rgba(255, 255, 255, 1);
      border-radius: 29px;
      color: rgba(72, 102, 255, 1);
      line-height: 40px;
      margin: 0 auto;
    }
  }
  .bottomImg {
    margin-top: 120px;
  }
}
</style>
